<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link href="/main/css/layout.css" rel="stylesheet" type="text/css" />
    <link href="/main/css/jquery.jscrollpane.lozenge.css" rel="stylesheet" type="text/css" />
    <link href="/main/css/jquery.jscrollpane.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .pic img{
            width: 55px;
            height: 55px;
        }
        #m1{
            width: 100%;
            height: 1000px;
        }
        #msg_board{
            padding-top: 50px;
            margin-left: 50px;
            width: 1500px;
            margin: 0 auto;
        }
        #title{
            width: 100%;
            height: 50px;
            line-height: 50px;
        }
        #title span{
            font-size: 35px;
            display:block;
            text-align:center;
        }
        #message{
            margin: 0 auto;
            width: 1200px;
            height: 520px;
            border-right: 20px;

        }
        #game{
            width: 80%;
            height: 100%;
            float: left;
        }
        #rank{
            width: 20%;
            height: 100%;
            float: left;
            background-color: #01aaed;
        }
        #table{
            height: 80%;
            width: 100%;
            overflow-y: auto;
        }
        #table td{
            margin: 0;
            padding: 0;
            border: 1px solid black;
        }
        #cz{
            width: 100%;
            height: 20%;
        }
        #cz_s{
            width: 100%;
            height: 50%;
        }
        #cz_x{
            width: 100%;
            height: 50%;
        }
        #btn_d_s{
            width: 33%;
            margin: 0 auto;
            height: 100%;
        }
        #btn_d_z{
            width: 33%;
            float: left;
            height: 100%;
        }
        #btn_d_x{
            width: 33%;
            float: left;
            margin: 0 auto;
            height: 100%;
        }
        #btn_d_y{
            width: 33%;
            float: left;
            height: 100%;
        }
        .cz_b{
            width: 100%;
            height: 100%;
        }
        .map {
            margin: 10px auto;
            height: 480px;
            width: 900px;
            background: #00D0FF;
            border: 10px solid #AFAEB2;
            border-radius: 8px;
        }
    </style>
</head>

<body>
<!--背景-->
<div class="background"><img src="/main/img/bg1.jpg" alt="加载中" /><div class="logo"></div></div>
<!--主内容开始-->
<div id="container">
    <div id="head">
        <a href="#" class="arrange" id="arrange"></a>
        <div class="h-right">
            <a href="main.html" class="home"></a>
            <img src="/main/img/line.png" width="2" height="50" alt="" />
            <a href="#" class="cloud" id="cloud">
                <div class="same">云同步</div>
            </a>
            <img src="/main/img/line.png" width="2" height="50" alt="" />
            <a href="#" class="bell"><span class="tip">3</span></a>
            <img src="/main/img/line.png" width="2" height="50" alt="" />
            <div class="user">
                <div class="pho"><img id="img" src="/userimg/undefined.jpg" width="52" height="50" alt="" /></div>
                <span id="name">[[*{session.user.user_name}]]
          <div class="user-info" id="twodm">
            <div class="jtt"></div>
            <div class="menu">
              <div class="first">
                <a href="#">个人信息</a>
              </div>
              <div class="second">
                <a href="#">通知<em>3</em></a>
              </div>
              <a href="gologout" class="quit" >退出</a>
            </div>
          </div>
        </span>
            </div>
            <img src="/main/img/line.png" width="2" height="50" alt="" />
            <a href="#" class="notice" id="notice"></a>
        </div>
    </div>
    <!--侧边栏-右-->
    <div class="side-bar" id="side-bar">
        <div class="side-bar-in">
            <ul class="tab">
                <li class="title vtitle">
                    <a href="#" class="lianxi"></a>
                </li>
                <li class="title">
                    <a href="#" class="heart"></a>
                </li>
                <li class="title">
                    <a href="#" class="setting"></a>
                </li>
                <div class="vcon vcon1" id="vcon" style="display:block;" >
                    <ul>
                        <li class="xuanz" th:each="user,userStat:${application.userlist}">
                            <div class="pic"><img th:src="${user.user_img_path}+${user.user_img_name}"></div>
                            <span>
                <h4 th:text="${user.user_name}"></h4>
                <p th:text="${user.user_status}"></p>
              </span>
                            <a href="#" class="v-big"></a>
                    </ul>
                </div>
                <div class="vcon">2</div>
                <div class="vcon">
                    <div class="block">
                        <span>背景颜色选择</span>
                        <a href="#" class="dot" id="blue"><img src="/main/img/blue_dot.png" width="14" height="14" alt="" /></a>
                        <a href="#" class="dot" id="pink"><img src="/main/img/pink_dot.png" width="14" height="14" alt="" /></a>
                        <a href="#" class="dot" id="green"><img src="/main/img/green_dot.png" width="14" height="14" alt="" /></a>
                    </div>
                </div>
            </ul>
        </div>
    </div>
    <!--左侧栏begin-->
    <div class="left-bar" id="left-bar">
        <ul>
            <!--      <li><a href="#" class="synergy">医技协同<em>医技协同</em></a></li>-->
            <!--      <li><a href="#" class="movie">影像诊断<em>影像诊断</em></a></li>-->
            <!--      <li><a href="#" class="computer">预约协同<em>预约协同</em></a></li>-->
            <!--      <li><a href="#" class="drug">预交金管理<em>预交金管理</em></a></li>-->
            <!--      <li><a href="#" class="results">个人绩效<em>个人绩效</em></a></li>-->
        </ul>
    </div>
    <!--左侧栏end-->
    <!--模块-->
    <div id="main">
        <div class="left-side">
            <div class="main_visual">
                <a href="javascript:;" id="btn_prev"></a>
                <a href="javascript:;" id="btn_next"></a>
                <div>
                    <ul>
                        <li>
                            <div id="m1">
                                <div id="msg_board">
                                    <div id="title">
                                        <span>贪吃蛇</span>
                                    </div>
                                    <div id="message">
                                        <div id="game">
                                            <div class="map">
                                                <canvas id="canvas" height="480" width="900">
                                                </canvas>
                                            </div>
                                        </div>
                                        <div id="rank">
                                            <div id="table">
                                                <table>
                                                    <tr>
                                                        <td>用户姓名</td>
                                                        <td>最高分数</td>
                                                        <td>游玩次数</td>
                                                    </tr>
                                                    <tr th:each="rank,rankStat:${ranks}">
                                                        <td>
                                                            <span class="username" th:text="${rank.user.user_name}"></span>
                                                        </td>
                                                        <td>
                                                            <span class="score" th:text="${rank.score}"></span>
                                                        </td>
                                                        <td>
                                                            <span class="count" th:text="${rank.count}"></span>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                            <div id="cz">
                                                <div id="cz_s">
                                                    <div id="btn_d_s">
                                                        <button class="cz_b" onclick="snakemove(1)">↑</button>
                                                    </div>
                                                </div>
                                                <div id="cz_x">
                                                    <div id="btn_d_z">
                                                        <button class="cz_b" onclick="snakemove(2)">←</button>
                                                    </div>
                                                    <div id="btn_d_x">
                                                        <button class="cz_b" onclick="snakemove(3)">↓</button>
                                                    </div>
                                                    <div id="btn_d_y">
                                                        <button class="cz_b" onclick="snakemove(4)">→</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!--主内容结束-->
<style>
    .copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
</style>
</body>

<script src="/main/js/jquery-1.7.1.min.js" language="javascript" type="text/javascript"></script>
<script src="/main/js/jquery.mousewheel.js" type="text/javascript"></script>
<script src="/main/js/jquery.jscrollpane.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/main/js/jquery.event.drag-1.5.min.js"></script>
<script type="text/javascript" src="/main/js/jquery.touchSlider.js"></script>
<script type="text/javascript" src="/main/js/jquery.nicescroll.js"></script>
<script src="/main/js/slide.js" language="javascript" type="text/javascript"></script>

<script th:inline="javascript">
    function setImg(){
        var imgObjPreview=document.getElementById("img");
        imgObjPreview.src = [[*{session.user.user_img_path}]] + [[*{session.user.user_img_name}]] ;
    }
</script>
<script type="text/javascript">
    $(function() {
        init();
    })
    function init() {
        setImg();
    }
</script>
<script type="text/javascript">
    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");

    var snake = []; //定义一条蛇，画蛇的身体
    var snakeCount = 6; //初始化蛇的长度
    var foodx = 0;
    var foody = 0;
    var togo = 0;

    var timer;

    function drawtable() { //画地图的函数
        for (var i = 0; i < 60; i++) { //画竖线
            ctx.strokeStyle = "black";
            ctx.beginPath();
            ctx.moveTo(15 * i, 0);
            ctx.lineTo(15 * i, 480);
            ctx.closePath();
            ctx.stroke();
        }
        for (var j = 0; j < 32; j++) { //画横线
            ctx.strokeStyle = "black";
            ctx.beginPath();
            ctx.moveTo(0, 15 * j);
            ctx.lineTo(900, 15 * j);
            ctx.closePath();
            ctx.stroke();
        }
        for (var k = 0; k < snakeCount; k++) { //画蛇的身体
            ctx.fillStyle = "#000";
            if (k == snakeCount - 1) {
                ctx.fillStyle = "red"; //蛇头的颜色与身体区分开
            }
            ctx.fillRect(snake[k].x, snake[k].y, 15, 15); //前两个数是矩形的起始坐标，后两个数是矩形的长宽。
        }

        //绘制食物
        ctx.fillStyle = "black";
        ctx.fillRect(foodx, foody, 15, 15);
        ctx.fill();
    }

    function start() { //定义蛇的坐标

        for (var k = 0; k < snakeCount; k++) {
            snake[k] = {
                x: k * 15,
                y: 0
            };
        }
        drawtable();
        addfood(); //在start中调用添加食物函数
    }

    function addfood() {
        foodx = Math.floor(Math.random() * 60) * 15; //随机产生一个0-1之间的数
        foody = Math.floor(Math.random() * 32) * 15;
        for (var k = 0; k < snake; k++) {
            if (foodx == snake[k].x && foody == sanke[k].y) { //防止产生的随机食物落在蛇身上
                addfood();
            }
        }
    }
    function snakemove(num) {
        switch (num) {
            case 2:
                if(togo == 3){
                    break;
                }
                togo = 1;
                break;
            case 1:
                if(togo == 4){
                    break;
                }
                togo = 2;
                break;
            case 4:
                if(togo == 1){
                    break;
                }
                togo = 3;
                break;
            case 3:
                if(togo == 2){
                    break;
                }
                togo = 4;
                break;
        }
    }
    function move() {
        switch (togo) {
            case 1:
                snake.push({
                    x: snake[snakeCount - 1].x - 15,
                    y: snake[snakeCount - 1].y
                });
                break; //向左走
            case 2:
                snake.push({
                    x: snake[snakeCount - 1].x,
                    y: snake[snakeCount - 1].y - 15
                });
                break;
            case 3:
                snake.push({
                    x: snake[snakeCount - 1].x + 15,
                    y: snake[snakeCount - 1].y
                });
                break;
            case 4:
                snake.push({
                    x: snake[snakeCount - 1].x,
                    y: snake[snakeCount - 1].y + 15
                });
                break;
            case 5:
                snake.push({
                    x: snake[snakeCount - 1].x - 15,
                    y: snake[snakeCount - 1].y - 15
                });
                break;
            case 6:
                snake.push({
                    x: snake[snakeCount - 1].x + 15,
                    y: snake[snakeCount - 1].y + 15
                });
                break;
            default:
                snake.push({
                    x: snake[snakeCount - 1].x + 15,
                    y: snake[snakeCount - 1].y
                });
        }
        snake.shift(); //删除数组第一个元素
        ctx.clearRect(0, 0, 900, 600); //清除画布重新绘制
        isEat();
        isDead();
        drawtable();
    }

    function keydown(e) {
        switch (e.keyCode) {
            case 37:
                if(togo == 3){
                    break;
                }
                togo = 1;
                break;
            case 38:
                if(togo == 4){
                    break;
                }
                togo = 2;
                break;
            case 39:
                if(togo == 1){
                    break;
                }
                togo = 3;
                break;
            case 40:
                if(togo == 2){
                    break;
                }
                togo = 4;
                break;
            case 65:
                if(togo == 6){
                    break;
                }
                togo = 5;
                break;
            case 68:
                if(togo == 5){
                    break;
                }
                togo = 6;
                break;
        }
    }

    function isEat() { //吃到食物后长度加
        if (snake[snakeCount - 1].x == foodx && snake[snakeCount - 1].y == foody) {
            addfood();
            snakeCount++;
            snake.unshift({
                x: -15,
                y: -15
            });
        }
    }

    function isDead() {
        var a = snake[snakeCount - 1].x;
        var b = snake[snakeCount - 1].y;
        if (a > 885 || b > 465 || a < 0 || b < 0) {
            clearInterval(timer);
            uploadscore();
            alert("you dead");
            location.href = "goSnake";
        }

        for (var i=0;i < snakeCount-1;i++){
            if(snake[i].x==a && snake[i].y==b){
                clearInterval(timer);
                uploadscore();
                alert("you dead");
                location.href = "goSnake";
            }
        }
    }

    function uploadscore(){
        var score = snakeCount;
        $.ajax({
            type:"post",//请求类型
            url:"uploadRank",//请求地址
            dataType:"json",//交互的数据类型
            data:{
                type:"30001",
                score:score
            },
            cache:false
        });
    }

    document.onkeydown = function(e) {
        keydown(e);
    }
    window.onload = function() { //调用函数
        start();
        timer=setInterval(move, 150);
        drawtable();
    }
</script>
</html>
